import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { timeFormat } from '@/utils/common';
import styles from './index.less';
import Download from '@/components/Download';

declare type NoticeType = {
  title: string;
  createTime: string;
  from: string;
  content: any;
};

const Index = ({ data, dispatch, location }) => {
  const [notice, setNotice] = useState({});
  const { id } = location.query;
  useEffect(() => {
    if (id) {
      dispatch({
        type: '$request/post',
        payload: {
          url: '/api/article/v1/detail',
          data: { uuid: id },
        },
      }).then(res => {
        const dom = document.querySelector('#content');
        dom.innerHTML = res.content;
        setNotice(res);
      });
      return () => {
        setNotice({});
      };
    }
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.title}>{notice.title}</div>
      <div className={styles.time}>
        {timeFormat(notice.createTime)}
        <span style={{ marginLeft: 15 }}>来源：{notice.from}</span>
      </div>
      <div className={styles.content} id="content"></div>
      {notice.fileList && notice.fileList.length ? (
        <div>
          <div style={{ marginTop: '40px', fontSize: '20px' }}>附件：</div>
          <div className={styles.fileList}>
            {notice.fileList.map(item => {
              return (
                <div>
                  <Download {...item}>{item.name}</Download>
                </div>
              );
            })}
          </div>
        </div>
      ) : (
        ''
      )}
    </div>
  );
};
export default connect(state => state['base'])(Index);
